<template>
	<view class="user">
		<view class="box1">
			<uni-nav-bar title="" :status-bar="true" background-color="#00000000" color="#000" :border='false'
				leftWidth='300rpx'>
			</uni-nav-bar>
			<view class="">
				<view class="">
					<image src="/static/logo.png" mode=""></image>
					<view class="">
						<view class="">
							Moanlijgan <image src="/static/logo.png" mode=""></image>
						</view>
						<view class="">
							156729768548
						</view>
					</view>
				</view>
				<view class="">
					<image :src="imageUrl + 'icon11.png'" mode=""></image>
				</view>
			</view>
			<view class="">
				<view class="">
					<image :src="imageUrl + 'icon12.png'" mode=""></image>
					<view class="">
						<view class="">
							645254
						</view>
						<view class="">
							米粒余额
						</view>
					</view>
				</view>
				<view class="">
					<image :src="imageUrl + 'icon13.png'" mode=""></image>
					<view class="">
						<view class="">
							645254
						</view>
						<view class="">
							总收益
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="">
				<view class="">
					<view class="">
						订单管理
					</view>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
				<view class="">
					<view class="">
						<image :src="imageUrl + 'icon8.png'" mode=""></image>
						<text>进行中</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon9.png'" mode=""></image>
						<text>已完成</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon10.png'" mode=""></image>
						<text>售后</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="">
					<view class="">
						常用功能
					</view>
					<!-- <uni-icons type="right" size="20"></uni-icons> -->
				</view>
				<view class="function">
					<view class="">
						<image :src="imageUrl + 'icon14.png'" mode=""></image>
						<text>我的佣金</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon15.png'" mode=""></image>
						<text>邀请好友</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon16.png'" mode=""></image>
						<text>我的客户</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon17.png'" mode=""></image>
						<text>会员权益</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="">
					<view class="">
						橱窗管理
					</view>
					<!-- <uni-icons type="right" size="20"></uni-icons> -->
				</view>
				<view class="function">
					<view class="">
						<image :src="imageUrl + 'icon18.png'" mode=""></image>
						<text>我的橱窗</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon19.png'" mode=""></image>
						<text>管理橱窗</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon20.png'" mode=""></image>
						<text>佣金订单</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon21.png'" mode=""></image>
						<text>选品中心</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="">
					<view class="">
						其他
					</view>
					<!-- <uni-icons type="right" size="20"></uni-icons> -->
				</view>
				<view class="other">
					<view class="">
						<image :src="imageUrl + 'icon22.png'" mode=""></image>
						<text>帮助中心</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon23.png'" mode=""></image>
						<text>咨询客服</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon22.png'" mode=""></image>
						<text>帮助中心</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon23.png'" mode=""></image>
						<text>咨询客服</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon23.png'" mode=""></image>
						<text>咨询客服</text>
					</view>
					<view class="">
						<image :src="imageUrl + 'icon23.png'" mode=""></image>
						<text>咨询客服</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,getCurrentInstance
	} from 'vue';
	const { appContext } = getCurrentInstance();
	const imageUrl = appContext.config.globalProperties.$imageUrl
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
	.user{
		min-height: 100vh;
		background: rgb(246, 247, 248);
		.box1{
			width: 100%;
			padding-bottom: 36rpx;
			background-image: url('http://mdomall.oss-cn-hangzhou.aliyuncs.com/static/bg3.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			>view:nth-child(2){
				display: flex;
				align-items:center;
				justify-content:space-between;
				// width: 94%;
				padding: 0 33rpx;
				margin: 0 auto;
				>view:nth-child(1){
					display: flex;
					align-items:center;
					>image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						margin-right: 35rpx;
					}
					
					>view{
						>view:nth-child(1){
							display: flex;
							align-items:center;
							font-size: 40rpx;
							font-weight: 700;
							color: rgba(43, 43, 43, 1);
						}
						>view:nth-child(2){
							font-size: 30rpx;
							color: rgba(126, 126, 126, 1);
						}
						image{
							width:160rpx;
							height: 40rpx;
							margin-left: 16rpx;
						}
					}
				}
				>view:nth-child(2){
					>image{
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			>view:nth-child(3){
				width: 94%;
				margin: 0 auto;
				margin-top: 48rpx;
				display: flex;
				align-items:center;
				justify-content:space-between;
				>view{
					display: flex;
					align-items:center;
					image{
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}
					>view{
						>view:nth-child(1){
							font-size: 36rpx;
							font-weight: 700;
							letter-spacing: 0px;
							color: rgba(42, 42, 42, 1);

						}
						>view:nth-child(2){
							font-size: 24rpx;
							color: rgba(102, 102, 102, 1);
						}
					}
				}
				>view:nth-child(2){
					margin-right: 100rpx;
				}
			}
			
		}
	
		.box2{
			padding: 0 33rpx;
			box-sizing: border-box;
			>view{
				width: 100%;
				border-radius: 16rpx;
				background-color: #fff;
				padding: 28rpx 32rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				>view:nth-child(1){
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;
					>view{
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(42, 42, 42, 1);

					}
				}
				>view:nth-child(2){
					display: flex;
					align-items:center;
					justify-content: space-between;
					padding: 0 40rpx;
					>view{
						display: flex;
						align-items: center;
						flex-direction: column;
						margin-bottom: 20rpx;
						image{
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 8rpx;
						}
						text{
							font-size: 26rpx;
							color: rgba(119, 119, 119, 1);
						}
					}
				}
				.function{
					padding: 0 !important;
					display: grid !important;
					grid-template-columns: auto auto auto auto !important;
					>view{
						image{
							width: 68rpx !important;
							height: 68rpx !important;
						}
					}
				}
				.other{
					padding: 0 !important;
					display: grid !important;
					grid-template-columns: auto auto auto auto !important;
					>view{
						image{
							width: 68rpx !important;
							height: 68rpx !important;
						}
					}
				}
			}
		}
	}
</style>